<template>
<div>
    <h1>BBP需求管理平台</h1>
    <div class="login">
        <div class="title" ></div>
        <div class="label">用户名</div>
        <Input v-model="user" class="inp">
        </Input>
        <div class="label">密码</div>
        <Input v-model="passwd" class="inp" type="password">
        </Input>
        <i-button type="primary" long class="submit" @click="submit">登录</i-button>
    </div>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      user:'',
      passwd:''
    }
  },
  methods:{
    submit:function(){
      var res={'code':'200','msg':'登录成功'}
      if(res.code==='200'){
        this.$Message.success('登录成功!');
        this.$router.push({name:'Mine',params: {id:'1'}}) 
      }else{
        this.$Message.error('密码错误!');
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
        h1{
            position: absolute;
            top: 10vh;
            width: 100vw;
            text-align: center;
        }
        .login{
            position: relative ;
            margin: 0 auto;
            width: 300px;
            height: 300px;
            top: 20vh;
            background-color: #f7f7f8;
            box-shadow: 0 0 10px 3px  #c5c8ce ;
            border-radius: 2%;
        }
        .inp{
            position: relative;
            margin-top: 2%;
            width: 90%;
            left: 5%;
        }
        .label{
            position: relative;
            margin-top: 2%;
            width: 90%;
            left: 5%;
            border: 0;
            text-align: center;
        }
        .submit{
            position: relative;
            margin-top: 6%;
            width: 90%;
            left: 5%;
        }
        .title{
            position: relative;
            height: 2%;
            width: 90%;
            left: 5%;
        }
</style>
